<template>
  <div class="beam-layout-container progress-feedback-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-month-picker
            class="month-picker"
            placeholder="开始时间"
            :defaultPickerValue="conditions.startDefaultPickerValue"
            :dateFormat="conditions.dateFormat"
            :valueFormat="conditions.valueFormat"
            v-model="conditions.startTime"
            @change="monthChange($event, 0)"
          />
          <a-month-picker
            class="month-picker"
            placeholder="结束时间"
            :defaultPickerValue="conditions.endDefaultPickerValue"
            :dateFormat="conditions.dateFormat"
            :valueFormat="conditions.valueFormat"
            v-model="conditions.endTime"
            @change="monthChange($event, 1)"
          />
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container" v-loading="pageLoading">
      <div class="table-header" header="进度反馈"></div>
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="150"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" @click="gotoView(row)"> 查看 </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
        <!--  -->
      </div>
      <div class="ant-table-footer">
        <span>已完成数量: {{ total }}</span>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 详情页 -->
    <detailPage
      :visible.sync="detailPageVisible"
      :completeNumber="completeNumber"
      :date="date"
    ></detailPage>
  </div>
</template>

<script>
import moment from "moment";
import bjRangeCalendar from "@/components/bj-range-calendar";
//详情页
import detailPage from "./detail";
import {
  getACListData,
  getACTotalData,
} from "@/api/wisdom-beam/planSchedule-app.js";
export default {
  components: {
    bjRangeCalendar,
    detailPage,
  },
  data() {
    return {
      date: "",
      completeNumber: "",
      detailPageVisible: false,
      pageLoading: false,
      total: 0,
      conditions: {
        //日期
        startDefaultPickerValue: "",
        endDefaultPickerValue: "",
        startTime: "",
        endTime: "",
        dateFormat: "YYYY-MM",
        valueFormat: "YYYY-MM",
      },
      columns: [
        {
          title: "月份",
          key: "time",
        },
        {
          title: "已完成数量",
          key: "completeNumber",
        },
        {
          title: "编制人",
          key: "fill_user",
        },
        {
          title: "编制时间",
          key: "fill_time",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //查询列表
    getData() {
      this.pageLoading = true;
      Promise.all([this.getList(), this.getTotalData()]).finally((_) => {
        this.pageLoading = false;
      });
    },

    //查询列表
    getList() {
      return new Promise((resolve, reject) => {
        let { page, pageSize } = this.pager;
        let { startTime, endTime } = this.conditions;
        getACListData({ page, pageSize, startTime, endTime })
          .then((res) => {
            let { data } = res;
            let result = data?.result ?? {};
            this.tableData = result?.rows ?? [];
            this.pager.total = result?.total ?? 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          });
      });
    },

    //合计
    getTotalData() {
      return new Promise((resolve, reject) => {
        let { startTime, endTime } = this.conditions;
        getACTotalData({ startTime, endTime })
          .then((res) => {
            let { data } = res;
            this.total = data?.result?.completeNumber ?? 0;
            resolve();
          })
          .catch((_) => {
            this.total = 0;
            reject();
          })
          .finally((_) => {});
      });
    },
    //监听日期选择
    monthChange(ev, type) {
      let { startTime, endTime } = this.conditions;
      //开始日期
      if (type == 0) {
        if (endTime && startTime) {
          if (!moment(startTime).isSameOrBefore(endTime)) {
            this.conditions.endDefaultPickerValue =
              moment(startTime).format("YYYY-MM");
            this.conditions.endTime = "";
          }
        } else {
          if (!endTime && startTime) {
            this.conditions.endDefaultPickerValue =
              moment(startTime).format("YYYY-MM");
          } else {
            this.conditions.endDefaultPickerValue = moment().format("YYYY-MM");
          }
        }
      } else {
        //结束日期
        if (endTime && startTime) {
          if (!moment(endTime).isSameOrAfter(startTime)) {
            this.conditions.startDefaultPickerValue =
              moment(endTime).format("YYYY-MM");
            this.conditions.startTime = "";
          }
        } else {
          if (!startTime && endTime) {
            this.conditions.startDefaultPickerValue =
              moment(endTime).format("YYYY-MM");
          } else {
            this.conditions.startDefaultPickerValue =
              moment().format("YYYY-MM");
          }
        }
      }
    },

    //开始日期禁用
    startDisabledDate(current) {
      let { endTime } = this.conditions;
      if (endTime) {
        return current && moment(endTime).isSameOrBefore(current);
      } else {
        return false;
      }
    },

    //结束日期禁用
    endDisabledDate(current) {
      let { startTime } = this.conditions;
      if (startTime) {
        return current && moment(startTime).isSameOrAfter(current);
      } else {
        return false;
      }
    },

    //查看
    gotoView(row = {}) {
      let { completeNumber, time } = row;
      this.completeNumber = completeNumber;
      this.date = time;
      this.detailPageVisible = true;
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.progress-feedback-container {
  .ant-table-footer {
    background: #fcfdff;
    color: #0098ff;
    font-size: 16px;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
    margin-top: -10px;
    span {
      margin-right: 20px;
    }
  }
}
</style>
